@if(groupName){
<p-panel [header]="groupName"
  class="form-group-panel border-noround"
  styleClass="border-0 border-noround border-1 surface-border border-x-none"
  [toggleable]="true">
  <div [formGroup]="group">

    @if(groupName){
    @for(item of controls; track item.key){
    <app-form-item [group]="group"
      [control]="item"
      [schema]="propertySchema(item.key)"></app-form-item>
    }
    }@else{
    @for(item of controls; track item.key){
    <app-form-item [group]="group"
      [groupName]="groupName"
      [control]="item"
      [schema]="propertySchema(item.key)"></app-form-item>
    }
    }
  </div>
</p-panel>
}
@else{
<div class="card border-0 border-noround mx-0 px-0">
  <div class="card-header pl-1 font-medium">{{groupName}}</div>
  <div [formGroup]="group">
    @if(groupName){
    @for(item of controls; track item.key){
    <app-form-item [group]="group"
      [control]="item"
      [schema]="propertySchema(item.key)"></app-form-item>
    }
    }@else{
    @for(item of controls; track item.key){
    <app-form-item [group]="group"
      [groupName]="groupName"
      [control]="item"
      [schema]="propertySchema(item.key)"></app-form-item>
    }
    }
  </div>
</div>
}